<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script type="text/javascript" src="../js/dingdan.js"></script>

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			header.mui-bar {
				display: none;
			}
			
			.mui-bar-nav~.mui-content {
				padding: 0;
			}
			
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			body {
				font-family: "微软雅黑";
				font-size: 16px;
			}
			
			.mui-slider-item {
				color: #EE6A50;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
				待配送
			</a>
					<a class="mui-control-item" href="#item2mobile">
				配送中
			</a>
					<a class="mui-control-item" href="#item3mobile">
				已完成
			</a>
					<a class="mui-control-item" href="#item4mobile">
				已取消
			</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell daipeisong" style="padding: 0px;">
										<div>
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													555
												</div>
											</div>

											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">

											<div style="width: 100%; ">
												<div style="width: 65%; float: left; margin-left: 25px; margin-bottom: 5px;">
													<span>李四 1869425366</span>
													<br>
													<span>欣苑2栋203</span>
												</div>
												<div style="width: 20%; float: right;">
													京东快递
												</div>
											</div>
											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													<span>支付金额 :</span>
													<span>15</span>
													<span>元</span>
												</div>
											</div>

											<div style="width: 100%;" >
												<button type="button" class="mui-btn mybutton" style="float: right; background-color:#EE6A50 ; margin-bottom: 5px; ">
													取消订单
												</button>
											</div>

										</div>

									</li>

									<!--
                                    	作者：1029963623@qq.com
                                    	时间：2016-03-22
                                    	描述：下面的div是用来 使底部导航区域 和分割开的
                                    -->
									<li class="mui-table-view-cell kongbai" style="padding: 0px;">
										<div style="height: 100%; height: 80px;">

										</div>
									</li>
									
									<li class="mui-table-view-cell daipeisong" style="padding: 0px;">
										<div>
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													555
												</div>
											</div>

											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">

											<div style="width: 100%; ">
												<div style="width: 65%; float: left; margin-left: 25px; margin-bottom: 5px;">
													<span>李四 1869425366</span>
													<br>
													<span>欣苑2栋203</span>
												</div>
												<div style="width: 20%; float: right;">
													京东快递
												</div>
											</div>
											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													<span>支付金额 :</span>
													<span>15</span>
													<span>元</span>
												</div>
											</div>

											<div style="width: 100%;" >
												<button type="button" class="mui-btn mybutton" style="float: right; background-color:#EE6A50 ; margin-bottom: 5px; ">
													取消订单
												</button>
											</div>

										</div>

									</li>

									<!--
                                    	作者：1029963623@qq.com
                                    	时间：2016-03-22
                                    	描述：下面的div是用来 使底部导航区域 和分割开的
                                    -->
									<li class="mui-table-view-cell" style="padding: 0px;">
										<div style="height: 100%; height: 80px;">

										</div>
									</li>

								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" style="padding: 0px;">
										<div>
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													555
												</div>
											</div>

											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">

											<div style="width: 100%; ">
												<div style="width: 65%; float: left; margin-left: 25px; margin-bottom: 5px;">
													<span>李四 1869425366</span>
													<br>
													<span>欣苑2栋203</span>
												</div>
												<div style="width: 20%; float: right;">
													京东快递
												</div>
											</div>
											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													<span>支付金额 :</span>
													<span>15</span>
													<span>元</span>

												</div>
											</div>
										</div>
									</li>

									<li class="mui-table-view-cell" style="padding: 0px;">
										<div style="height: 100%; height: 80px;">

										</div>
									</li>

								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" style="padding: 0px;">
										<div>
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													555
												</div>
											</div>

											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">

											<div style="width: 100%; ">
												<div style="width: 65%; float: left; margin-left: 25px; margin-bottom: 5px;">
													<span>李四 1869425366</span>
													<br>
													<span>欣苑2栋203</span>
												</div>
												<div style="width: 20%; float: right;">
													京东快递
												</div>
											</div>
											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													<span>支付金额 :</span>
													<span>15</span>
													<span>元</span>

												</div>
											</div>
										</div>
									</li>

									<li class="mui-table-view-cell" style="padding: 0px;">
										<div style="height: 100%; height: 80px;">

										</div>
									</li>

								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" style="padding: 0px;">
										<div>
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													555
												</div>
											</div>

											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">

											<div style="width: 100%; ">
												<div style="width: 65%; float: left; margin-left: 25px; margin-bottom: 5px;">
													<span>李四 1869425366</span>
													<br>
													<span>欣苑2栋203</span>
												</div>
												<div style="width: 20%; float: right;">
													京东快递
												</div>
											</div>
											<hr size="1px" style=" width: 95%; border:none;border-top:1px dashed #CDC9C9;" align="right">
											<div style="width: 100%; margin-top: 5px; margin-bottom: 5px;">
												<div style="width: 65%; margin-left: 25px;">
													<span>支付金额 :</span>
													<span>15</span>
													<span>元</span>

												</div>
											</div>
										</div>
									</li>

									<li class="mui-table-view-cell" style="padding: 0px; ">
										<div style="height: 100%; height: 80px;">

										</div>
									</li>

								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<nav class="mui-bar mui-bar-tab" style="background-color: rgb(253,253,253);">
			<div>
				<hr size="1px" />
				<div style="width: 50%; float: left;">
					<center>
						<a href="paijian.html">
							<img src="../images/bottom1.png" style="width:18% ;" />
							<br>
							<span style="color: black; font-family: '微软雅黑'; font-size: 13px; ">发起订单</span>
						</a>
					</center>
				</div>

				<div style="width: 50%; float: right;">
					<center>
						<img src="../images/bottom2.png" style="width:18% ;" />
						<br>
						<span style="color: rgb(0, 122, 255); font-family: '微软雅黑'; font-size: 13px;">历史订单</span>
					</center>
				</div>

			</div>
		</nav>

		<script src="../js/mui.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
		</script>
	</body>

</html>